<template>
  <!-- 用户组权限 -->
  <el-container class="group_power">
    <el-aside width="138px">
      <ul>
        <!-- <li class="cur_li">用户组</li> -->
        <li v-for="item in roleList" :key="item.id" @click="changeRoleId(item)" @mouseover="cur_roleId=item.id">
          {{item.name}}
          <el-dropdown>
            <span class="el-dropdown-link">
              <i class="el-icon-caret-top"></i>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="del_role">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li>
          <p @click="visabled=true" class="show_color">添加角色</p>
          <el-dialog title="添加角色" :visible.sync="visabled" width="350px" top="212px" center>
            <el-form :model="addRoleForm" ref="addRoleForm" label-width="60px" label-position="left" class="addRole_box">

              <el-form-item label="昵称" prop="roleName" :rules="[
            { required: true, message: '请输入昵称'},
          ]">
                <el-input type="text" v-model="addRoleForm.roleName" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item class="addRole_box_checkbox" label="角色菜单权限（必选）" prop="sel_roleId" :rules="[
            { type: 'array', required: true, message: '请至少选择一个角色菜单权限', trigger: 'change' }
          ]">
                <el-checkbox-group v-model="addRoleForm.sel_roleId">
                  <el-checkbox v-for="item in role_power_sel" :key="item.id" :label="item.id" name="sel_roleId">{{item.name}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="resetForm" size="small">取 消</el-button>
              <el-button type="primary" @click="sure_addRole" size="small">确 定</el-button>
            </span>
          </el-dialog>
        </li>
      </ul>
    </el-aside>
    <el-main>
      <menuTree :cur_roleId="cur_roleId" :cur_roleName="cur_roleName" />
    </el-main>
  </el-container>
</template>

<style lang="scss">
.group_power {
  .el-aside {
    text-align: center;
    padding-top: 48px;
    color: #a1a1a1;
    border-right: 1px solid #d1d1d1;
    li {
      padding: 20px;
      cursor: pointer;
      .el-dropdown {
        float: right;
        width: 5px;
        height: 5px;
      }
      .el-icon-caret-bottom {
        display: none;
      }
      .el-icon-caret-top {
        display: none;
      }
      &:hover {
        .el-icon-caret-top {
          display: block;
        }
      }
      span:hover {
        .el-icon-caret-top {
          display: none;
        }
        .el-icon-caret-bottom {
          display: block;
          color: #0070ff;
        }
      }
      .addRole_box {
        & /deep/ {
          .addRole_box_checkbox {
            .el-form-item__label {
              width: 100% !important;
            }
            .el-form-item__content {
              margin-left: 0 !important;
            }
            label {
              margin-left: 0 !important;
              margin-right: 10px;
            }
          }
        }
      }
    }
    .cur_li {
      background-color: #0070ff;
      color: #fff;
    }
  }
  .el-main {
    .table {
      text-align: center !important;
      .tr {
        display: flex;
      }
    }
  }
}
</style>

<script>
import {
  getWebRoleList,
  getWebRole,
  addWebRole,
  deleteWebRole,
  updateWebRole,
  getWebMenuList
} from '~/api/'
import menuTree from '~/components/permission/menuTree.vue'
export default {
  components: {
    menuTree,
  },
  data() {
    return {
      roleid: 2,
      roleList: [],
      role_power_sel: [], //管理后台菜单列表结构
      visabled: false,
      addRoleForm: {
        roleName: '',
        sel_roleId: []
      },
      //编辑或删除角色
      cur_roleId: null,
      cur_roleName: null,

      //************** */
    }
  },
  beforeMount() {
    this.res_roleList()
    this.res_WebMenuList()
    this.res_roleInfo()
  },
  methods: {
    changeRoleId(item) {
      this.cur_roleId = item.id
      this.cur_roleName = item.name
    },
    async res_roleList() { //获取管理后台角色列表
      let res = await getWebRoleList(this)
      if (res.code === '0') {
        this.roleList = res.data.roleList
      } else {
        this.$message.error(res.message)
      }
    },
    async res_roleInfo() { //获取管理后台角色信息
      let res = await getWebRole(this, this.roleid)
    },
    async res_WebMenuList() { //获取管理后台菜单列表结构
      let res = await getWebMenuList(this)
      if (res.code === '0') {
        this.role_power_sel = res.data.tree
      } else {
        this.$message.error(res.message)
      }
    },
    sure_addRole() { //添加角色
      this.$refs['addRoleForm'].validate(async (valid) => {
        if (!valid) return
        let res = await addWebRole(this, this.addRoleForm.roleName, '', '', this.addRoleForm.sel_roleId)
        if (res.code === '0') {
          this.$message.success('角色添加成功')
          this.res_roleList()
          this.resetForm()
          this.visabled = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    async del_role() { //删除角色
      let res = await deleteWebRole(this, this.cur_roleId)
      if (res.code === '0') {
        this.$message.success('角色删除成功')
        this.res_roleList()
      } else {
        this.$message.error(res.message)
      }
    },
    resetForm() {
      this.$refs['addRoleForm'].resetFields()
      this.visabled = false
    }
  }
}
</script>
